<template>
  <div class="callQueueConfig">
    <div class="top">
        <span :class="tabType === 1 ? 'tabActive' : ''" @click="tabType = 1">基本参数</span> <span>|</span> <span :class="tabType === 2 ? 'tabActive' : ''" @click="tabType = 2">排队设置</span>
    </div>
    <el-form
      size="mini" :model="callQueueConfigForm"
      ref="callQueueConfigForm" label-position="top">
      <div v-if="tabType === 1" class="basic-par">
        <el-form-item prop="agent" class="formItem fl" style="height: 56px;" size="mini" :rules="{ required: false, trigger: 'change', message: '请选择座席分配策略' }">
          <span slot="label">
            座席分配策略
            <el-tooltip placement="top">
              <div slot="content">{{recurrentTip[callQueueConfigForm.assignStrategy]}}</div>
              <i class="V7_iconfont V7_iconV7tubiao_bangzhu-42 tooltip"></i>
            </el-tooltip>
          </span>
          <m7Select filterable size="mini" v-model="callQueueConfigForm.assignStrategy"
            :value="callQueueConfigForm.assignStrategy"
            :options="agentData"
            placeholder="请选择">
          </m7Select>
        </el-form-item>
        <el-form-item prop="maxLimit" class="formItem fr" key="maxLimit" :rules="{ required: true, trigger: 'blur', validator: this.timeOutNumber }">
          <span slot="label">
            最大排队数
            <el-tooltip placement="top">
              <div slot="content">
                技能组内呼叫最大排队数量，包括正在排队的来电和正在呼叫座席的来电。<br>
                可设置0-99的数字，0为不限制排队数，建议设置为座席成员的1-2倍范围内。<br>
                超过此数值的溢出规则，可在语音导航转人工节点进行配置
              </div>
              <i class="V7_iconfont V7_iconV7tubiao_bangzhu-42 tooltip"></i>
            </el-tooltip>
          </span>
          <el-input class="widthOne" type="number" :minlength="0" :maxlength="2" v-model.trim="callQueueConfigForm.maxLimit" placeholder="请输入" size="mini"></el-input>
        </el-form-item>
        <el-form-item prop="userFreeTransfer" class="formItem fl">
          <span slot="label">
            无空闲座席溢出
            <el-tooltip placement="top">
              <div slot="content">有座席处于置忙，通话，振铃等状态时不再排队等待直接溢出。<br>溢出后的处理可在语音导航管理转人工节点的无效溢出条件中设置</div>
              <i class="V7_iconfont V7_iconV7tubiao_bangzhu-42 tooltip"></i>
            </el-tooltip>
          </span>
          <el-radio size="mini" v-model="callQueueConfigForm.userFreeTransfer" :label="true">是</el-radio>
          <el-radio size="mini" v-model="callQueueConfigForm.userFreeTransfer" :label="false">否</el-radio>
        </el-form-item>
        <el-form-item label="是否启用播报工号" prop="sayJobNumber" class="formItem fr">
          <el-radio size="mini" v-model="callQueueConfigForm.sayJobNumber" :label="true">是</el-radio>
          <el-radio size="mini" v-model="callQueueConfigForm.sayJobNumber" :label="false">否</el-radio>
        </el-form-item>
        <el-form-item prop="timeOut" class="formItem fl" key="timeOut" :rules="{ required: true, trigger: 'blur', validator: this.validateNumber }">
          <span slot="label">
            座席振铃时长/S
            <el-tooltip placement="top">
              <div slot="content">分配呼叫到座席时，座席的最大振铃时长，<br>未接听时将呼叫下一个可用座席，建议设置为20-30秒</div>
              <i class="V7_iconfont V7_iconV7tubiao_bangzhu-42 tooltip"></i>
            </el-tooltip>
          </span>
          <el-input class="widthOne" type="number" v-model.trim="callQueueConfigForm.timeOut" placeholder="请输入" size="mini"></el-input>
        </el-form-item>
        <el-form-item prop="waitTime" class="formItem fr" key="waitTime" :rules="{ required: true, trigger: 'blur', validator: this.validateNumber }">
          <span slot="label">
            排队时长/S
            <el-tooltip placement="top">
              <div slot="content">技能组排队最大时长，建议设置为座席振铃时长的2-3倍。<br>超过此数值的溢出规则，可在语音导航转人工节点进行配置</div>
              <i class="V7_iconfont V7_iconV7tubiao_bangzhu-42 tooltip"></i>
            </el-tooltip>
          </span>
          <el-input class="widthOne" type="number" v-model.trim="callQueueConfigForm.waitTime" placeholder="请输入" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="座席未接通不再分配" prop="sayJobNumber" class="formItem fl" key="sayJobNumber">
          <span slot="label">
            座席未接通不再分配
            <el-tooltip placement="top">
              <div slot="content">
                选择是，座席拒接或者呼叫失败时，本次将不再分配给此座席，会重新分配给技能组中其他座席<br>
                选择否，一通通话技能组最多分配20次，如果还未成功接听，则通话结束</div>
              <i class="V7_iconfont V7_iconV7tubiao_bangzhu-42 tooltip"></i>
            </el-tooltip>
          </span>
          <el-radio size="mini" v-model="callQueueConfigForm.failedNotAssigned" :label="true">是</el-radio>
          <el-radio size="mini" v-model="callQueueConfigForm.failedNotAssigned" :label="false">否</el-radio>
        </el-form-item>
        <el-form-item label="禁止将通话转入此技能组" class="formItem fr">
          <span slot="label">
            禁止将通话转入此技能组
            <el-tooltip placement="top">
              <div slot="content">
                选择是，则在通话转移时不能将通话转给此技能组中的座席</div>
              <i class="V7_iconfont V7_iconV7tubiao_bangzhu-42 tooltip"></i>
            </el-tooltip>
          </span>
          <el-radio size="mini" v-model="callQueueConfigForm.isForbidTransferIn" :label="true">是</el-radio>
          <el-radio size="mini" v-model="callQueueConfigForm.isForbidTransferIn" :label="false">否</el-radio>
        </el-form-item>
      </div>
      <div v-if="tabType === 2">
        <el-form-item label="客户等待音" prop="customWaitingVoice" class="formItem" style="display: block">
        <el-select v-model="callQueueConfigForm.customWaitingVoice"
          @change="selectSound"
          @clear="clearSound"
          filterable
          clearable
          size="mini"
          placeholder="请选择客户等待音" class="customWaitingVoice">
          <el-option
            v-for="(item,index) in customWaitingVoiceList"
            :key="index"
            :label="item.name"
            :value="item._id">
          </el-option>
        </el-select>
        <AudioProgress :row="currentSound" type="common" :showListen="true" :showDowload="false" :url="currentSound.fileUrl" :propIsplay="currentSound.isPlay"></AudioProgress>
        <span class="configVoice" @click="gotoSoundConfig">配置语音库</span>
      </el-form-item>
      <el-form-item prop="wait" class="formItem fl" >
        <span slot="label">
          排队等待提醒
          <el-tooltip placement="top">
            <div slot="content">选择继续等待或播报排队位置，排队位置不变</div>
            <i class="V7_iconfont V7_iconV7tubiao_bangzhu-42 tooltip"></i>
          </el-tooltip>
        </span>
        <el-switch
          v-model="callQueueConfigForm.waitingReminded"
          active-color="#13ce66"
          inactive-color="#ff4949"
          @change="waitingRemindedChange">
        </el-switch>
      </el-form-item>
      <el-form-item label="" class="formItem1 fl" v-if="callQueueConfigForm.waitingReminded">
        <el-radio-group v-model="callQueueConfigForm.waitingRemindedType">
          <div class="waitingRemindedType">
            <el-radio :label="'continueWaitingReminded'" class="ridioStyle">继续等待语音
            </el-radio>
            <el-tooltip placement="top">
              <div slot="content">继续等待无需操作，任意按键则退出排队，按排队超时溢出处理</div>
              <i class="V7_iconfont V7_iconV7tubiao_bangzhu-42 tooltip"></i>
            </el-tooltip>
          </div>
          <div class="waitingRemindedType1">
            <el-radio :label="'broadcastWaitingPosition'" class="ridioStyle">排队位置播报间隔</el-radio>
            <el-tooltip placement="top">
              <div slot="content">按间隔播报客户在队列中的位置，直至等待超时溢出或分配座</div>
              <i class="V7_iconfont V7_iconV7tubiao_bangzhu-42 tooltip"></i>
            </el-tooltip>
          </div>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="" class="formItem fl" v-if="callQueueConfigForm.waitingReminded && callQueueConfigForm.waitingRemindedType=='continueWaitingReminded'">
        <el-select v-model="callQueueConfigForm.continueWaitingVoice"
          @change="selectWaitSound"
          @clear="clearWaitSound"
          filterable
          clearable
          size="mini"
          placeholder="请选择客户继续等待音" class="continueWaitingVoice">
          <el-option
            v-for="(item,index) in waitingVoiceList"
            :key="index"
            :label="item.name"
            :value="item._id">
          </el-option>
        </el-select>
        <AudioProgress :row="currentWaitSound" type="common" :showListen="true" :showDowload="false" :url="currentWaitSound.fileUrl" :propIsplay="currentWaitSound.isPlay"></AudioProgress>
      </el-form-item>
      <el-form-item size="mini" class="formItem fr" v-if="callQueueConfigForm.waitingReminded && callQueueConfigForm.waitingRemindedType=='broadcastWaitingPosition'" prop="broadcastPositionInterval" :rules="{ required: false, trigger: 'blur', validator: this.secondNumber }">
        <el-input type="number" v-model.number="callQueueConfigForm.broadcastPositionInterval" placeholder="最小为15秒" size="mini" class="inputStyle1" min="15">
          <template slot="append" class="second">s</template>
        </el-input>
      </el-form-item>
      <el-form-item size="mini" class="formItem1 fl" v-if="callQueueConfigForm.waitingReminded && callQueueConfigForm.waitingRemindedType=='continueWaitingReminded'" prop="continueWaitingInterval" :rules="{ required: false, trigger: 'blur', validator: this.secondNumber }">
        <span slot="label">语音播报间隔</span>
        <el-input type="number" v-model.number="callQueueConfigForm.continueWaitingInterval" placeholder="最小为15秒" min="15" size="mini" class="inputStyle">
          <template slot="append" class="second">s</template>
        </el-input>
      </el-form-item>
      <el-form-item size="mini" class="formItem1 fl" v-if="callQueueConfigForm.waitingReminded && callQueueConfigForm.waitingRemindedType=='continueWaitingReminded'" prop="continueWaitingTimes" :rules="[{ validator: this.continueWaitingNumber, required: false, trigger: 'blur'}]">
        <span slot="label">播报次数</span>
        <el-input type="number" v-model.number="callQueueConfigForm.continueWaitingTimes" placeholder="请输入" size="mini" class="inputStyle" min="0" max="20">
          <template slot="append" class="second">次</template>
        </el-input>
      </el-form-item>
      <br/>
      </div>
    </el-form>
  </div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { isNumber2 } from '@/utils/validate'
import { IvrModule } from '@/store/modules/config/ivr'
import AudioProgress from '@/components/audio/AudioProgress.vue'
@Component({
  name: 'callQueueConfig',
  components: { AudioProgress }
})
export default class CallQueueConfig extends Vue {
  private validateNumber = (rule: any, value: string, callback: any) => {
    if (!isNumber2((value))) {
      callback(new Error('请输入正整数'))
    } else if (Number(value) <= 0) {
      callback(new Error('请输入正整数'))
    } else {
      callback()
    }
  }

  private timeOutNumber = (rule: any, value: string, callback: any) => {
    if (!isNumber2(value)) {
      callback(new Error('请输入0-99正整数'))
    } else if (Number(value) <= 0 || Number(value) > 99) {
      callback(new Error('请输入0-99正整数'))
    } else {
      callback()
    }
  }

  private secondNumber = (rule: any, value: string, callback: any) => {
    if (!isNumber2(value)) {
      callback(new Error('请输入正整数'))
    } else if (Number(value) < 15) {
      callback(new Error('最小15秒'))
    } else {
      callback()
    }
  }

  private continueWaitingNumber = (rule: any, value: string, callback: any) => {
    if (!isNumber2(value)) {
      callback(new Error('请输入正整数'))
    } else if (Number(value) <= 0 || Number(value) > 20) {
      callback(new Error('请输入大于0小于20的正整数'))
    } else {
      callback()
    }
  }

  public callQueueConfigForm = {
    sayJobNumber: false,
    assignStrategy: 'rrmemory',
    userFreeTransfer: false,
    maxLimit: 10,
    timeOut: 30,
    waitTime: 60,
    failedNotAssigned: false,
    isForbidTransferIn: false,
    customWaitingVoice: '',
    continueWaitingVoice: '',
    waitingReminded: false,
    waitingRemindedType: 'continueWaitingReminded',
    continueWaitingInterval: '',
    continueWaitingTimes: 3,
    broadcastPositionInterval: ''
  }

  private tabType: number = 1
  public setCallQueueConfigData (obj?: any) {
    if (obj) {
      // 判断新加的默认没数据的情况，还保持默认状态
      for (const key in obj) {
        for (const val in this.callQueueConfigForm) {
          if (key === val) {
            this.callQueueConfigForm[val] = obj[key]
          }
        }
      }
      this.callQueueConfigForm = Object.assign({}, { failedNotAssigned: false }, this.callQueueConfigForm)
    } else {
      this.callQueueConfigForm = {
        sayJobNumber: false,
        assignStrategy: 'rrmemory',
        userFreeTransfer: false,
        maxLimit: 10,
        timeOut: 30,
        waitTime: 60,
        failedNotAssigned: false,
        isForbidTransferIn: false,
        customWaitingVoice: '',
        continueWaitingVoice: '',
        waitingReminded: false,
        waitingRemindedType: 'continueWaitingReminded',
        continueWaitingInterval: '',
        continueWaitingTimes: 3,
        broadcastPositionInterval: ''
      }
    }
  }

  private recurrentTip = {
    rrmemory: '按照技能组内座席的登录顺序依次分配呼叫，呼叫一轮后重新按此轮选次序呼叫',
    order: '按照技能组内座席工号从小到大的顺序分配呼叫，每次都会优先呼叫顺序最高且空闲的座席',
    random: '对技能组内座席成员随机分配呼叫，呼叫量较大情况下接近于平均分配',
    skill: '按照座席技能值从高到低顺序分配呼叫，技能值相同时随机分配呼叫',
    maxFreeTime: '优先分配技能组内上一通通话结束后空闲时间最长的座席',
    leastAnswerTimes: '优先分配技能组内来电接听次数最少的座席',
    longestAnswerTimes: '对接听电话后挂机时间离当前时间最远的坐席优先分配'
  }

  private agentData = [
    { label: '轮选', value: 'rrmemory' },
    { label: '顺序', value: 'order' },
    { label: '随机', value: 'random' },
    { label: '技能', value: 'skill' },
    { label: '最长空闲时间', value: 'maxFreeTime' },
    { label: '最少接听次数', value: 'leastAnswerTimes' },
    { label: '距离接听时间最长', value: 'longestAnswerTimes' }
  ]

  private customWaitingVoiceList: [] = [] // 等待音乐选择的数据

  private waitingVoiceList: [] = [] // 继续等待音乐选择的数据

  private currentSound = {} // 当前选择的音乐

  private currentWaitSound = {} // 当前继续等待选择的音乐

  // 选择声音
  private selectSound (val: any) {
    this.customWaitingVoiceList.forEach((item, index) => {
      if ((item as any)._id === val) {
        this.currentSound = item
      }
    })
  }

  // 清除声音
  private clearSound (val: any) {
    this.currentSound = ''
  }

  // 选择继续等待声音
  private selectWaitSound (val: any) {
    this.waitingVoiceList.forEach((item, index) => {
      if ((item as any)._id === val) {
        this.currentWaitSound = item
      }
    })
  }

  // 清除继续等待声音
  private clearWaitSound (val: any) {
    this.currentWaitSound = ''
  }

  // 去配置语音库
  private gotoSoundConfig () {
    (this as any).$router.push({ path: '/setting_center/index/voice_navigation?activeName=voiceConfig' })
  }

  // 排队等待提醒
  private waitingRemindedChange (val: boolean) {
    if (val) {
      this.getWaitingSound()
    }
  }

  // 获取等待音
  private getWaitingSound () {
    const actionData = { page: 1, limit: 100 }
    const data = { url: '/call/action/ivr/voiceLibrary/query', method: 'POST', data: actionData }
    IvrModule.IvrCommonAction(data).then((res: any) => {
      if (res && res.success) {
        const list = res.list || []
        if (list.length === 0) {
          this.customWaitingVoiceList = []
          this.waitingVoiceList = []
        } else {
          this.customWaitingVoiceList = list.filter(item => {
            return item.isWaitingVoice
          })
          this.waitingVoiceList = list.filter(item => {
            return !item.isWaitingVoice
          })
        }
        this.customWaitingVoiceList.forEach((item, index) => {
          if ((item as any)._id === this.callQueueConfigForm.customWaitingVoice) {
            this.currentSound = item
          }
        })
        this.waitingVoiceList.forEach((item, index) => {
          if ((item as any)._id === this.callQueueConfigForm.continueWaitingVoice) {
            this.currentWaitSound = item
          }
        })
      }
    })
  }

  private beforeMount () {
    this.getWaitingSound()
    // this.auditionRole = checkPermission(null, { value: ['voice_database_audition'] }) // 听取录音权限
  }

  private beforeDestroy () {
    this.currentSound = {}
    this.currentWaitSound = {}
  }
}
</script>
<style lang="stylus" scoped>
@import "../../../common/style/base.styl"
  .basic-par
    display flex
    flex-wrap wrap
    justify-content space-between
  .top
    padding-left 5px
    height 20px
    margin-bottom 20px
    background #e5f3fd
    cursor pointer
    span
      line-height 20px
    .tabActive
      color #008CEE
      text-decoration underline
  .formItem
    width 45%
  .formItem1
    width 100%
  .widthOne
    width 150px
  .tooltip
    color #a5a5ad
    font-size 12px
    cursor pointer
  .radio-span
    cursor pointer
    color $c-main
    margin 0 2%
  .customWaitingVoice
    display inline-block
    margin-right 2%
  .continueWaitingVoice
    display inline-block
    width 90%
    margin-right 10px
  .configVoice
    cursor pointer
    color #008cee
    margin-left 2%
    font-size 12px
  .tip
    font-size 12px
    color #999
    display block
  .waitingRemindedType
    width 55%
    display inline-block
  .waitingRemindedType1
    width 45%
    display inline-block
  .inputStyle
    width 46%
    display inline-block
  .inputStyle1
    width 72%
    display inline-block
.el-select-dropdown__item
  padding 0 5%

</style>
<style lang="stylus">
  .callQueueConfigForm
  .ridioStyle
    margin-right 5px !important
    .el-radio__label
      font-size 12px
    .el-select-dropdown__list
      .el-select-dropdown__item
        padding 0 20px
  .inputStyle
    width 46%
    display inline-block
    .el-input__inner
      width 90% !important
      display inline-block !important
    .el-input-group__append
      display inline-block !important
      line-height 30px !important
  .inputStyle1
    width 72%
    display inline-block
    .el-input__inner
      width 86% !important
      display inline-block !important
    .el-input-group__append
      display inline-block !important
      line-height 30px !important
</style>
